<template>
  <el-breadcrumb class="breadcrumb" :separator-icon="ArrowRight">
    <el-breadcrumb-item class="breadcrumb-item" :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item class="breadcrumb-item" >{{
      categoryData.name
    }}</el-breadcrumb-item>
  </el-breadcrumb>

  <el-carousel class="banner" height="500px" indicator-position="">
    <el-carousel-item v-for="item in bannerList" :key="item.id">
      <img :src="item.imgUrl" alt="" />
    </el-carousel-item>
  </el-carousel>

  <div class="sub-list">
    <h3>全部分类</h3>
    <ul>
      <li v-for="item in categoryData.children" :key="item.id">
        <RouterLink :to="`/category/sub/${item.id}`">
          <div class="img">
            <img :src="item.picture" alt="" />
            <p>{{ item.name }}</p>
          </div>
        </RouterLink>
      </li>
    </ul>
  </div>


  <div class="sub-list" v-for="item in categoryData.children" :key="item.id">
    <h3>{{ item.name }}</h3>
    <ul>
      <li v-for="i in item.goods" :key="i.id" class="item">
        <GoodsItem  :goods="i" />
      </li>
    </ul>
  </div>
</template>

<script setup name="ComponentName">
import { ArrowRight } from '@element-plus/icons-vue'
import GoodsItem from '../Home/components/GoodsItem.vue'

import { useBanner } from './components/useBanner'
import { useCategory } from './components/useCategory'


const { bannerList } = useBanner()
const {categoryData} = useCategory()


</script>

<style scoped lang="scss">
.breadcrumb {
  padding: 30px 100px;
  .breadcrumb-item {
    font-size: 16px;
    color: #333;
  }
}

.banner {
  width: 100%;
  padding: 0 100px;
  img {
    width: 100%;
    height: 100%;
  }
}

.sub-list {
  width: 88%;
  padding: 0 80px;
  background: #fff;
  margin: 20px auto;


  h3 {
    font-size: 28px;
    color: #333;
    padding: 30px 0;
    text-align: center;
  }
  ul {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    gap: 30px;

    li {
      width: calc((100% / 7) * 6 / 7);
      height: 200px;
      a {
        width: 100%;
        height: 100%;
        .img {
          width: 100%;
          height: 150px;
          background: #f5f4f4;
          img {
            width: 100%;
            height: 100%;
          }
        }
        p {
          font-size: 18px;
          color: #333;
          font-weight: bold;
          text-align: center;
        }
      }
      &:hover {
        transform: translateY(-10px);
        transition: all 0.3s ease-in-out;
      }
    }
    .item{
      width: calc(20% - 30px);
      height: 350px;
    }
  }
}
</style>
